<template>
	<view class="resourRecom">
		<navBar class="nav_bar" isBack backColor="#fff" background="transparent">
			<view class="nav_center" slot="center">
				<view class="followBtn" @click="toFollow(estateInfo.follow_status)" :class="{'active':estateInfo.follow_status==0}">{{estateInfo.follow_status==0?"已关注":"关注"}}</view>
			</view>
		</navBar>
		<view class="BannerView">
			<view>
				<view class="Banner" v-if="bannerIndex == 0">
					<swiper :indicator-dots="false" :autoplay="false" :circular="true" :interval="3000"
						:duration="1500" @change='VideoBannerChange'>
						<swiper-item v-for="(item,index) in estateInfo.video" :key="index">
							<video :show-center-play-btn='true' :enable-progress-gesture="false" :controls="false" 
								id="myvideo" bindplay='playVideo' style="width: 100%;height: 100%;"
								:autoplay='true'
								:src="item.path"
								bindfullscreenchange="fullScreen" bindended="closeVideo">
							</video>
						</swiper-item>
					</swiper>
					<view class="ViewDot">
						<view class="ViewDotItem">{{VideIndex+1}}/{{estateInfo.video.length}}</view>
					</view>
				</view>
				<view class="Banner" v-else>
					<swiper :indicator-dots="false" :autoplay="true" :circular="true" :interval="3000"
						:duration="1500" @change='imgBannerChange'>
						<swiper-item v-for="(item,index) in estateInfo.thumb_url" :key="index">
							<image :src="item.path"></image>
						</swiper-item>
					</swiper>
					<view class="ViewDot">
						<view class="ViewDotItem">{{imgIndex+1}}/{{estateInfo.thumb_url.length}}</view>
					</view>
				</view>
				<view class="BannerDot">
					<view v-for="(Item,Idenx) in navTop" :key="Idenx"
						:class="['BannerDotItem',bannerIndex == Idenx?'Click':'']" @click="BannerDotClick(Idenx)">
						{{Item}}
					</view>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="topTitle">
				{{estateInfo.name}}
				<view class="topInfo">
					<view class="num">
						<span>{{estateInfo.area_price}}元/m²</span>
						<p>参考均价</p>
					</view>
					<view class="num">
						{{estateInfo.sale_num}}套
						<p>在售房源</p>
					</view>
					<view class="num">
						{{estateInfo.start_area}}-{{estateInfo.end_area}}m²
						<p>房源面积</p>
					</view>
				</view>
			</view>
			<h3>房源推荐</h3>
			<view class="resourList">
				<view v-if="resourList.length>0">
					<view class="item" v-for="(item,index) in resourList" :key="index">
						<view class="imgBox">
							<image :src="`${baseImg}/static/common/swiper-3.jpg`" mode=""></image>
						</view>
						<view class="itemInfo">
							<view class="infoTop">
								<view style="width: 442rpx;" class="omit-1">{{item.title}}</view>
								<p>{{item.house_type}} | {{item.area}}m² | {{item.orientation}}</p>
							</view>
							<view class="infoBottom">
								<span style="margin-right: 10rpx;">{{item.sale_price}}万元</span>| {{item.area_price}}元/m²
							</view>
						</view>
					</view>
				</view>
				<view class="not" v-else>
					暂无房源数据~
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import service_oneN from '@/service/oneN.js'
	export default{
		data(){
			return{
				baseImg:'http://manager.ryz1620.com',
				// navTop:['VR样板间','视频','图片'],
				itemIndex:0,
				estate_id:null,
				estateInfo:{}, //小区信息
				resourList:[], //房源推荐列表
				page:1,
				pagesize:10,
				navTop: ['视频', '图片'],
				bannerIndex: 0, //视频还是图片轮播点
				imgIndex: 0, //图片轮播
				imgArrList: [],
				VideIndex: 0, //视频轮播
			}
		},
		onLoad(options) {
			this.$utils.getUrl()
			this.estate_id = options.estate_id;
			this.getEstateDetail();
			this.getResourList()
		},
		onReachBottom() { //加载更多
			uni.showLoading({
				title:'加载中...'
			})
			this.page++
			let params = {
				estate_id:this.estate_id,
				page:this.page,
				pagesize:this.pagesize
			}
			service_oneN.getResourList(params).then(res=>{
				console.log(res);
				if(res.code==1){
					if(!res.data.length){
						uni.showToast({
							title:'没有更多了~',
							icon:'none'
						})
						return
					}
					this.resourList = this.resourList.concat(res.data)
				}
			})
			setTimeout(function(){
				uni.hideLoading()
			},500)
		},
		methods:{
			// 图片的banner
			imgBannerChange(e) {
				this.imgIndex = e.detail.current
			},
			// 视频的banner
			VideoBannerChange(e) {
				this.VideIndex = e.detail.current
			},
			// 轮播区分是图片还是视频
			BannerDotClick(row) {
				// console.log(row);
				this.bannerIndex = row
			},
			// 选择nav
			// selectItem(index){
			// 	console.log(index)
			// 	this.itemIndex = index
			// 	console.log(this.itemIndex)
			// },
			// 获取小区信息
			getEstateDetail(){
				service_oneN.getEstateDetail({estate_id:this.estate_id}).then(res=>{
					console.log(res)
					if(res.code==1){
						this.estateInfo = res.data?res.data:{}
					}
				})
			},
			
			// 获取房源推荐列表
			getResourList(){
				this.page = 1
				let params = {
					estate_id:this.estate_id,
					page:this.page,
					pagesize:this.pagesize
				}
				service_oneN.getResourList(params).then(res=>{
					console.log(res);
					if(res.code==1){
						this.resourList = res.data?res.data:[]
					}
				})
			},
			
			// 关注小区
			toFollow(followStatus){
				let status = followStatus==0?1:0
				service_oneN.toFollow({estate_id:this.estate_id,status}).then(res=>{
					console.log(res)
					if(res.code==1){
						if(followStatus==0){
							uni.showToast({
								title:'已取消关注',
								icon:'success'
							})
							this.getEstateDetail()
						}else{
							uni.showToast({
								title:'关注成功',
								icon:'success'
							})
							this.getEstateDetail()
						}
					}
				})
			},
			
		}
	}
</script>

<style lang="scss">
	page{width: 100%;height: 100%;}
	.resourRecom{
		position: relative;
		width: 100%;
		height: 100%;
		padding-bottom: constant(safe-area-inset-bottom);///兼容 IOS<11.2/
		padding-bottom: env(safe-area-inset-bottom);///兼容 IOS>11.2/
		background-color: #fff;
		.nav_bar{
			position: relative;
			z-index: 10;
			.nav_center{
				display: flex;
				justify-content: flex-end;
				padding-right: 36rpx;
				width: 100%;
				.followBtn{
					position: relative;
					text-align: center;
					font: 400 20rpx/48rpx PingFang SC;
					width: 112rpx;
					height: 48rpx;
					color: #333;
					background-color: #FFD425;
					border-radius: 28rpx;
				}
				.active{
					color: #333;
					background-color: rgba(255,255,255,0.8);
				}
			}
		}
// 轮播
		.BannerView {
			position: absolute;
			top: 0;
			width: 100%;

			.Banner {
				height: 500rpx;
				background: #000;
				position: relative;

				.ViewDot {
					position: absolute;
					bottom: 20rpx;
					right: 32rpx;
					padding: 6rpx 24rpx;
					background: rgba(0, 0, 0, 0.5);
					border-radius: 22rpx;

					.ViewDotItem {
						font-size: 22rpx;
						font-weight: 500;
						color: #FFFFFF;
					}
				}
			}

			.BannerDot {
				display: flex;
				align-items: center;
				background: rgba(255, 255, 255, 0.6);
				width: max-content;
				border-radius: 22rpx;
				position: absolute;
				bottom: 20rpx;
				left: 50%;
				transform: translate(-50%, 0%);
				overflow: hidden;
				font-weight: 500;

				.BannerDotItem {
					font-size: 22rpx;
					font-weight: 500;
					color: #333333;
					padding: 6rpx 24rpx;
					border-radius: 22rpx;
					opacity: 1;
				}

				.Click {
					background: #FFD425;
				}
			}
		}

		// 内容
		.content{
			position: absolute;
			top: 500rpx;
			left: 0;
			z-index: 10;
			width: 100%;
			background-color: #fff;
			padding: 40rpx 36rpx;
			border-radius: 24rpx 24rpx 0 0 ;
			.topTitle{
				font: 600 44rpx/60rpx PingFang SC;
				color: #333;
				.topInfo{
					margin: 16rpx 0 48rpx 0;
					width: 678rpx;
					height: 138rpx;
					border-radius: 8rpx;
					background-color: #F8F8F8;
					padding: 28rpx 32rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.num{
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: space-between;
						font: 600 32rpx/52rpx PingFangSC-Semibold;
						color: #333333;
						span{color: #FF6561;}
						p{font: 400 24rpx/36rpx PingFang SC;color: #939393;}
					}
				}
			}
			h3{
				font: 600 36rpx/50rpx PingFang SC;
				color: #333333;
			}
			
			// 房源列表
			.resourList{
				margin-top: 12rpx;
				.item{
					padding: 28rpx 0;
					display: flex;
					border-bottom: 2rpx solid #F4F4F4;
					.imgBox{
						margin-right: 20rpx;
						width: 220rpx;
						height: 164rpx;
						border-radius: 4rpx;
						image{width: 220rpx;height: 164rpx;border-radius: 4rpx;}
					}
					.itemInfo{
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						.infoTop{
							font: 600 28rpx/48rpx PingFang SC;
							color: #333;
							p{font: 400 24rpx/36rpx PingFang SC;}
						}
						.infoBottom{
							font: 400 24rpx/48rpx PingFangSC-Regular;
							color: #939393;
							span{
								font: 500 28rpx/48rpx PingFangSC-Medium ;
								color: #FF6561;
							}
						}
					}
				}
				.not{
					width: 100%;
					margin-top: 40rpx;
					text-align: center;
					font: 400 30rpx/40rpx PingFang SC;
					color: #333;
				}
			}
		}
	}
</style>
